{% extends 'base/base.html' %}
{% load static %}
{% load i18n %}
{% load allauth %}

{% block title %}密码重置邮件已发送 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .password-page {
        background-image: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }
    
    .password-card {
        border: none;
        box-shadow: 0 5px 15px rgba(163, 112, 247, 0.1);
        transition: all 0.3s ease;
    }
    
    .password-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(163, 112, 247, 0.15);
    }
    
    .password-header {
        background: linear-gradient(135deg, #a370f7 0%, #ff9fc6 100%);
        color: white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 15px 20px;
    }
    
    .password-header h5 {
        margin: 0;
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #a370f7, #ff9fc6);
        border: none;
        box-shadow: 0 4px 10px rgba(163, 112, 247, 0.3);
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #995de7, #ff8ab9);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(163, 112, 247, 0.4);
    }
    
    .email-icon {
        font-size: 4rem;
        background: linear-gradient(135deg, #a370f7, #ff9fc6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 20px;
    }
    
    .success-message {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px;
        background-color: rgba(163, 112, 247, 0.05);
        border-radius: 8px;
    }
    
    .success-message p {
        color: #666;
        margin-bottom: 10px;
    }
    
    .success-message ul {
        text-align: left;
        color: #666;
    }
</style>
{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="password-page">
                    <div class="card password-card">
                        <div class="card-header password-header">
                            <h5 class="mb-0"><i class="fas fa-check-circle me-2"></i>邮件发送成功</h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="text-center">
                                <i class="fas fa-envelope-open-text email-icon"></i>
                                <h3 class="mb-3 fw-bold">{% trans "密码重置邮件已发送" %}</h3>
                                
                                <div class="success-message">
                                    <p><i class="fas fa-info-circle me-2 text-primary"></i>我们已向您提供的邮箱地址发送了一封包含密码重置链接的邮件。</p>
                                    <p>如果您在几分钟内没有收到邮件，请检查：</p>
                                    <ul>
                                        <li>您输入的邮箱地址是否正确</li>
                                        <li>邮件是否被归类到垃圾邮件或促销邮件文件夹</li>
                                        <li>您的邮箱过滤器是否拦截了我们的邮件</li>
                                    </ul>
                                    <p class="mt-3">如果您仍然没有收到邮件，请尝试再次发送或联系我们的客服团队获取帮助。</p>
                                </div>
                                
                                <div class="d-flex justify-content-center mt-4">
                                    <a href="{% url 'account_login' %}" class="btn btn-primary me-3">
                                        <i class="fas fa-sign-in-alt me-2"></i>返回登录
                                    </a>
                                    <a href="{% url 'account_reset_password' %}" class="btn btn-outline-secondary">
                                        <i class="fas fa-redo me-2"></i>重新发送邮件
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %} 